<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#out {
				width: 520px;
				height: 451px;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}
			#imgList {
				list-style: none;
				position: absolute;
			}
			#imgList li {
				float: left;
				margin: 10px;
			}
			#imgList li img {
				width: 500px;
			}
			#navDiv{
				position: absolute;
				bottom: 15px;
			}
			#navDiv a {
				float: left;
				width: 15px;
				height: 15px;
				background-color: #89FF00;
				margin: 0 5px;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<ul id="imgList">
				<li><img src="img/1.jpg" ></li>
				<li><img src="img/2.jpg" ></li>
				<li><img src="img/3.jpg" ></li>
				<li><img src="img/4.jpg" ></li>
				<li><img src="img/5.jpg" ></li>
				<li><img src="img/6.jpg" ></li>
				<li><img src="img/7.jpg" ></li>
			</ul>
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>				
			</div>
		</div>
		<script>
			window.onload = function() {
				// 动态的ul长度
				var imgList = document.getElementById("imgList");
				var imgArr = document.getElementsByTagName("img");
				imgList.style.width = 520 * imgArr.length + "px";
		
				//动态导航居中
				var navDiv = document.getElementById("navDiv");
				var out = document.getElementById("out");
				navDiv.style.left = (out.clientWidth - navDiv.clientWidth) / 2 + "px";
		
				//定位效果
				var allA = document.getElementsByTagName("a");
				var index = 0;
				allA[index].style.backgroundColor = "black";
		
				//点击导航效果
				for (let i = 0; i < allA.length; i++) {
					allA[i].onclick = function() {
						move(imgList, -520 * i, 20);
						setA();
						// imgList.style.left=-520*i+"px";
						// allA[index].style.backgroundColor="";
						// index=i;
						// allA[index].style.backgroundColor="black";
					}
				}
		
				// 动画效果
				function move(obj, target, speed, callback) { //元素；目标位置；速度;回调函数
					clearInterval(obj.timer);
					var current = parseInt(window.getComputedStyle(obj, null).left);
					//获得当前位置
					//判断运动方向
					if (target < current) {
						speed = -speed;
					}
					//定时器标识
					obj.timer = window.setInterval(function() {
						//m每次开始获取一下位置
						var oldValue = parseInt(window.getComputedStyle(obj, null).left);
						//移动并在指定位置停下
						var newValue = oldValue + speed;
						//调整一下停止位置，小的误差会随时间无限放大
						if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
							newValue = target;
						}
						imgList.style.left = newValue + "px";
						if (newValue == target) {
							clearInterval(obj.timer);
							callback();
						}
		
					}, 30);
		
				}
				change();
				//自动轮播
				//一个定时器用于定时调用
				function change() {
					setInterval(function() {
						index++;
						index = index % imgArr.length;
						move(imgList, -520 * index, 20, function() {
							if (index >= imgArr.length - 1) {
								imgList.style.left = 0;
							}
							setA();
						});
		
					}, 3000);
				}
		
				function setA() {
					for (let i = 0; i < allA.length; i++) {
						allA[i].style.backgroundColor = "";
						allA[index].style.backgroundColor = "black";
		
					}
				}
			} //onload
		</script>
	</body>
</html>
